<% extend "phone/base.html" %>

<% block 'head' : %>
<link rel="stylesheet" href="/dist/phone-order-comfirm.css">
<% end %>

<div ng-controller="AppCtrl" ng-cloak>
    <div class="order-address">
        <i class="am-icon am-icon-map-marker left"></i>
        <i class="am-icon am-icon-angle-right right" ng-click="changeAddress()"></i>
        <div class="am-cf">
            <p class="am-cf">
                <span>收货人: {{address[addressIndex].recieverName}}</span>
                <span class="am-fr">{{address[addressIndex].phone}}</span>
            </p>
            <p class="am-text-xs">收货地址:<span class="am-badge am-margin-horizontal-sm am-radius">{{address[addressIndex].Area.title}}</span>{{address[addressIndex].province + address[addressIndex].city + address[addressIndex].area + address[addressIndex].address}}</p>
        </div>
    </div>

    <div class="am-padding-sm" >
        <div class="am-panel am-panel-default shoppingcart am-margin-bottom-sm">
            <div class="am-panel-hd shoppingcart-shop-title">
                <span>共{{shoppingCart.length}}件</span>
                <span>运费:{{fare}}元</span>
            </div>
            <div class="am-panel-bd">
                <div class="shoppingcart-item" ng-controller="GoodsCtrl" ng-repeat="goods in shoppingCart" ng-init="goodsIndex = $index">
                    <div class="shoppingcart-item-main">
                        <img ng-src="{{goods.Good.mainImg}}" >
                        <h3>{{goods.Good.title}}</h3>
                        <p class="am-text-sm am-cf">
                            <span class="am-text-danger">￥ {{goods.Good.price * goods.Good.perNum}} <span class="am-text-sm">/{{goods.Good.perStr}}</span> </span>
                            <span class="am-fr am-margin-right-sm">x {{goods.num}}</span>
                        </p>
                    </div>
                </div>
                <div class="am-form am-form-horizontal am-margin-top-sm">
                    <div class="am-form-group">
                        <label class="am-u-sm-3 am-form-label">留言</label>
                        <div class="am-u-sm-9">
                            <input class="am-form-field" placeholder="买家留言" ng-model="msg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="counter am-cf am-padding-left">
        <div class="am-fl">
            <strong>总价: ￥ {{totalPrice}}</strong>
        </div>
        <div class="am-fr counter-buy-btn am-padding-horizontal-sm">
            <span ng-click="buy()">确认并支付</span>
        </div>
    </div>

    <div class="lg-modal am-modal am-modal-no-btn" tabindex="-1" id="address-modal" ng-controller="AddressCtrl">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">选择收货地址
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <ul class="address-list am-list">
                    <li class="address-item" ng-repeat="addr in address" ng-click="setAddr($index)">
                        <p class="am-cf">
                            <span class="am-fl">收货人: {{addr.recieverName}}</span>
                            <span class="am-fr">{{addr.phone}}</span>
                        </p>
                        <p class="am-text-xs am-text-left">
                            <span class="am-text-warning" ng-show="addr.isDefault">[默认]</span>
                            <span class="am-badge am-margin-horizontal-sm am-radius">{{addr.Area.title}}</span>
                            {{addr.province + addr.city + addr.area + addr.address}}
                        </p>
                        <i class="am-icon am-icon-check-circle-o am-text-warning" ng-show="$index == addressIndex"></i>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <form id="order-form" class="am-hide" action="/user/buy" method="post">
        <input type="hidden" name="address">
        <input type="hidden" name="order">
        <input type="hidden" name="msg">
    </form>
</div>

<script type="text/plain" id="shoppingCart">
    <%- @order %>
</script>
<script type="text/plain" id="addresses">
    <%- @addresses %>
</script>
<script type="text/plain" id="fare">
    <%- @fare %>
</script>

<% block 'scripts': %>
<script src="/dist/phone-order-comfirm.js"></script>
<% end %>